<script setup>
import { inject, onBeforeUnmount, onMounted, ref } from "vue"
import {household, reset_params} from "@/js/request_params"
import { housetype,relation,gender, bloodMap, nation, education, marry, military } from "@/js/base_info_map";
import zhCn from "element-plus/es/locale/lang/zh-cn"
import { Object } from "core-js";
import { userStore } from "@/store/user";
import { birthDeclaration } from "@/api/resident_request";
import { ElMessage } from "element-plus";
// 后续扩展请复制该文件
//family_establishment_服务
  const locale = ref(zhCn);
  const service_form = ref();
  const direction = ref('btt');
  const drawer = ref(false);
  const store = userStore();
  household.value.housetypeId = 1;
  household.value.changetype ="户口申报"
  const query_response =  ref([
    {
      householdType:"家庭户口",
      housenum:'1',
      policestation:'派出所',
      relation:'户主',
      name:'耳春龙',
      gender:'男',
      birthday:'2004-04-04',
      nation:'汉族',
      idnum:'111'
    }
  ]);
  const saveBirthDeclaration = () => {
    birthDeclaration(household.value).then((res)=>{
      console.log(res);
      ElMessage.success({
        message:res.msg+"身份证号为"+res.result.idnum,
        duration:3000
      })
      setTimeout(()=>{
    location.reload()
  },1000)


    })

  }
  const disabledDate = (time) => {
      return time.getTime() > Date.now();
  }
  const handle_close = () => {
    drawer.value = false;
  }
  onMounted(() => {
    household.value.pname = store.get_use_info.pname
    household.value.pid = store.get_use_info.pid
    household.value.changetype = "户口申报"
    household.value.popTypeId = 1;
  })
  onBeforeUnmount(()=>{
    reset_params(household.value)
  })
</script>
<template>
    <!-- 表单 -->
    <div class="w-[100%] h-[100%] flex justify-center" >
    <div class="card w-[100%] h-[100%] flex justify-center" >
        <spa class="span"></spa>
        <span class="span"></span>
        <span class="span"></span>
        <spa class="span"></spa>
        <div class="shell shadow-xl"  style="width:90%;height:90%">
          <svg class="check" xmlns="http://www.w3.org/2000/svg" height="0.9em" viewBox="0 0 512 512">
            
            <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path>
          </svg>
          <p class="tracking-[10px] text-[20px] font-[800] text-black">户口申报</p>
          <el-form class="grid  grid-cols-3 gap-x-14 -gap-y-1  relative justify-items-center items-center"  :model="household" ref="service_form" :rules="rules">
            <el-form-item label="姓名:">
              <el-input v-model="household.name" placeholder="请填写内容"></el-input>
            </el-form-item>
            <el-form-item label="性别:">
              <el-select v-model="household.genderId" placeholder="请选择">
                <el-option v-for="index in Object.keys(gender).length"  :key="index" :label="gender[index]" :value="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="家庭关系:">
              <el-select v-model="household.relationId" placeholder="请选择">
                <el-option v-for="index in Object.keys(relation).length"  :key="index" :label="relation[index]" :value="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="出生日期:">
              <el-config-provider :locale="locale">
              <el-date-picker
                style="width:180px"
                v-model="household.birthday"
                format = "YYYY-MM-DD"
                value-format = "YYYY-MM-DD"
                type="date"
                placeholder="请选择"
                :disabled-date ="disabledDate"
                :size="'default'"
              />
            </el-config-provider>
            </el-form-item>
            <el-form-item label="身份证号:">
              <el-input  v-model="household.idnum" placeholder="请填写内容" disabled></el-input>
            </el-form-item>
            <el-form-item label="民族:">
              <el-select v-model="household.nationId" placeholder="请选择">
                <el-option v-for="index in Object.keys(nation).length"  :key="index" :label="nation[index]" :value="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="血型:">
              <el-select v-model="household.bloodId" placeholder="请选择">
                <el-option v-for="index in Object.keys(bloodMap).length"  :key="index" :label="bloodMap[index]" :value="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="派出所:">
              <el-input v-model=" household.pname" placeholder="请填写内容" disabled style="width:180px"></el-input>
            </el-form-item>
            <el-form-item label="户号:">
              <el-input v-model="household.housenum" placeholder="请填写内容(顺序生成)" disabled style="width:180px"></el-input>
            </el-form-item>
            <el-form-item label="户口类别:">
              <el-select v-model="household.housetypeId"  placeholder="请填写"  style="width: 180px" disabled>
                <el-option v-for="index in Object.keys(housetype).length"  :key="index" :label="housetype[index]" :value="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="变动类型:">
              <el-input v-model="household.changetype" placeholder="户口申报" disabled></el-input>
            </el-form-item>
          <el-form-item label="住所:">
              <el-input v-model="household.address" placeholder="请填写内容" disabled></el-input>
            </el-form-item>
        </el-form>
          <hr>
          <div class="relative -top-1  flex justify-around items-center">
            <button class="card_button" @click="saveBirthDeclaration">
              申报保存
              <svg class="arrow" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
              <path d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z"></path>
              </svg>
            </button>
        </div>
        </div>
      </div>
    </div>
</template>

<style scoped>
@import url(../css/form_card.css);
.el-form {
  height: 70%;
}:deep(.el-input__wrapper:hover) {
  --tw-ring-color: rgb(233 213 255);
  box-shadow: var(--tw-ring-inset) 0 0 3px calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  scale: 1.03;
}
:deep(.el-input__wrapper) {
  transition: all 500ms;
}
.el-input :deep(.el-input__wrapper.is-focus){
  --tw-ring-color: rgb(216 180 254);
  --tw-ring-offset-color: #84f2fc;
  box-shadow: var(--tw-ring-inset) 0 0 3px calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  
}
.el-input :deep(.el-input__wrapper) {
  transition: all 500ms;
}
.el-input,
.el-select {
  
  width:180px;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}
:deep(.el-form-item__label) {
  text-shadow: 1px 2px 2px rgba(165, 165, 165, 0.8);
}
.el-form-item:nth-child(1) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 12px;
}
.el-form-item:nth-child(2) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 12px;
}
.el-form-item:nth-child(3) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 2px;
}
.el-form-item:nth-child(4) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 2px;
}
.el-form-item:nth-child(5) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 2px;
}
.el-form-item:nth-child(6) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 12px;
}
.el-form-item:nth-child(7) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 12px;
}
.el-form-item:nth-child(8) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 7px;
}
.el-form-item:nth-child(9) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 12px;
}
.el-form-item:nth-child(10) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 2px;
}
.el-form-item:nth-child(11) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 2px;
}
.el-form-item:nth-child(12) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 12px;
}
.el-form-item:nth-child(13) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 12px;
}
.el-form-item:nth-child(14) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 2px;
}
.el-form-item:nth-child(15) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 12px;
}
.el-form-item:nth-child(16) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 2px;
}
.el-form-item:nth-child(17) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 2px;
}
.el-form-item:nth-child(18) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 1px;
}
</style>
